<template>
  <section class="hero-banner-fullscreen">
    <!-- 背景图片 -->
    <div class="banner-background" :style="{ backgroundImage: `url(${bannerImage})` }">
      <!-- 浮动云朵 -->
      <div class="clouds-container">
        <div v-for="n in 6" :key="n" :class="`cloud cloud-${n}`"></div>
      </div>
      
      <!-- 渐变遮罩 -->
      <div class="banner-overlay"></div>
    </div>

    <!-- 诗词内容 -->
    <div class="poetry-content" v-if="poetry" @click="changePoetry">
      <div class="poetry-text animate-fade-in" :key="poetryKey">
        <p class="poetry-sentence">
          <span class="typewriter">{{ displayedText }}</span>
          <span class="cursor-blink" v-if="isTyping && typingStage === 'content'">|</span>
        </p>
        <div class="poetry-info" v-show="showAuthorInfo">
          <span class="poetry-author">
            <span class="typewriter">{{ displayedAuthor }}</span>
            <span class="cursor-blink" v-if="isTyping && typingStage === 'author'">|</span>
          </span>
          <span class="poetry-title" v-show="showTitle">
            <span class="typewriter">《{{ displayedTitle }}》</span>
          </span>
        </div>
        <div class="click-hint" v-show="!isTyping">
          <i class="fas fa-redo-alt"></i> 点击更换
        </div>
      </div>
    </div>

  </section>
</template>

<script>
export default {
  name: "HeroBanner",
  props: {
    slides: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      poetry: null,
      bannerImage: 'https://blog-wyy-1252271603.cos.ap-shanghai.myqcloud.com/20251107/article-cover/banner.jpg',
      displayedText: '',
      displayedAuthor: '',
      displayedTitle: '',
      isTyping: false,
      typewriterTimer: null,
      poetryKey: 0,
      typingStage: 'content', // content, author, title, done
      showAuthorInfo: false,
      showTitle: false,
    }
  },
  mounted() {
    this.fetchPoetry();
  },
  beforeDestroy() {
    if (this.typewriterTimer) {
      clearTimeout(this.typewriterTimer);
    }
  },
  methods: {
    async fetchPoetry() {
      try {
        const response = await fetch('https://v1.jinrishici.com/all.json');
        const data = await response.json();
        this.poetry = data;
        this.startTypewriter();
      } catch (error) {
        console.error('获取今日诗词失败:', error);
        // 设置默认诗词
        this.poetry = {
          content: '岱宗夫如何？齐鲁青未了。',
          author: '杜甫',
          origin: '望岳'
        };
        this.startTypewriter();
      }
    },
    startTypewriter() {
      if (!this.poetry) return;
      
      // 重置所有状态
      this.displayedText = '';
      this.displayedAuthor = '';
      this.displayedTitle = '';
      this.showAuthorInfo = false;
      this.showTitle = false;
      this.isTyping = true;
      this.typingStage = 'content';
      
      // 第一阶段：打字显示诗句内容
      const contentText = this.poetry.content;
      let contentIndex = 0;
      
      const typeContent = () => {
        if (contentIndex < contentText.length) {
          this.displayedText += contentText.charAt(contentIndex);
          contentIndex++;
          this.typewriterTimer = setTimeout(typeContent, 150);
        } else {
          // 诗句打完后，延迟500ms开始打作者信息
          this.typewriterTimer = setTimeout(() => {
            this.showAuthorInfo = true;
            this.typingStage = 'author';
            typeAuthor();
          }, 500);
        }
      };
      
      // 第二阶段：打字显示作者信息
      const authorText = `—— ${this.poetry.author || '佚名'}`;
      let authorIndex = 0;
      
      const typeAuthor = () => {
        if (authorIndex < authorText.length) {
          this.displayedAuthor += authorText.charAt(authorIndex);
          authorIndex++;
          this.typewriterTimer = setTimeout(typeAuthor, 100);
        } else {
          // 作者打完后，延迟300ms显示标题
          this.typewriterTimer = setTimeout(() => {
            this.showTitle = true;
            this.typingStage = 'title';
            typeTitle();
          }, 300);
        }
      };
      
      // 第三阶段：打字显示标题
      const titleText = this.poetry.origin || '诗词';
      let titleIndex = 0;
      
      const typeTitle = () => {
        if (titleIndex < titleText.length) {
          this.displayedTitle += titleText.charAt(titleIndex);
          titleIndex++;
          this.typewriterTimer = setTimeout(typeTitle, 100);
        } else {
          // 全部打完
          this.isTyping = false;
          this.typingStage = 'done';
        }
      };
      
      // 开始第一阶段
      typeContent();
    },
    async changePoetry() {
      if (this.isTyping) return; // 正在打字时不允许切换
      
      this.poetryKey++; // 触发重新渲染动画
      if (this.typewriterTimer) {
        clearTimeout(this.typewriterTimer);
      }
      await this.fetchPoetry();
    },
  },
};
</script>

<style lang="scss" scoped>
// 全屏 Banner
.hero-banner-fullscreen {
  position: relative;
  width: 100vw;
  height: 100vh;
  margin-left: calc(-50vw + 50%);
  overflow: hidden;
  
  @include responsive(md) {
    height: 80vh;
  }
  
  @include responsive(sm) {
    height: 70vh;
  }
}

// 背景图片
.banner-background {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation: slowZoom 30s ease-in-out infinite alternate;
}

@keyframes slowZoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.08);
  }
}

// 渐变遮罩
.banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(0, 0, 0, 0.3) 50%,
    rgba(0, 0, 0, 0.5) 100%
  );
  
  :root[data-theme='dark'] & {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0.5) 50%,
      rgba(0, 0, 0, 0.6) 100%
    );
  }
}

// 浮动云朵
.clouds-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0.2;
  pointer-events: none;
  
  .cloud {
    position: absolute;
    background: white;
    border-radius: 100px;
    opacity: 0.5;
    
    &::before,
    &::after {
      content: '';
      position: absolute;
      background: white;
      border-radius: 100px;
    }
  }
  
  .cloud-1 {
    width: 100px;
    height: 40px;
    top: 15%;
    animation: floatCloud 25s infinite linear;
    
    &::before {
      width: 50px;
      height: 50px;
      top: -25px;
      left: 10px;
    }
    
    &::after {
      width: 60px;
      height: 40px;
      top: -15px;
      right: 10px;
    }
  }
  
  .cloud-2 {
    width: 120px;
    height: 48px;
    top: 35%;
    animation: floatCloud 30s infinite linear 5s;
    
    &::before {
      width: 60px;
      height: 60px;
      top: -30px;
      left: 15px;
    }
    
    &::after {
      width: 70px;
      height: 48px;
      top: -20px;
      right: 15px;
    }
  }
  
  .cloud-3 {
    width: 90px;
    height: 36px;
    top: 55%;
    animation: floatCloud 28s infinite linear 10s;
    
    &::before {
      width: 45px;
      height: 45px;
      top: -22px;
      left: 10px;
    }
    
    &::after {
      width: 55px;
      height: 36px;
      top: -14px;
      right: 10px;
    }
  }
  
  .cloud-4 {
    width: 110px;
    height: 44px;
    top: 25%;
    animation: floatCloud 32s infinite linear 15s;
    
    &::before {
      width: 55px;
      height: 55px;
      top: -28px;
      left: 12px;
    }
    
    &::after {
      width: 65px;
      height: 44px;
      top: -18px;
      right: 12px;
    }
  }
  
  .cloud-5 {
    width: 95px;
    height: 38px;
    top: 65%;
    animation: floatCloud 27s infinite linear 8s;
    
    &::before {
      width: 48px;
      height: 48px;
      top: -24px;
      left: 10px;
    }
    
    &::after {
      width: 55px;
      height: 38px;
      top: -16px;
      right: 10px;
    }
  }
  
  .cloud-6 {
    width: 105px;
    height: 42px;
    top: 45%;
    animation: floatCloud 26s infinite linear 12s;
    
    &::before {
      width: 52px;
      height: 52px;
      top: -26px;
      left: 11px;
    }
    
    &::after {
      width: 62px;
      height: 42px;
      top: -17px;
      right: 11px;
    }
  }
}

@keyframes floatCloud {
  0% {
    left: -15%;
  }
  100% {
    left: 115%;
  }
}

// 诗词内容
.poetry-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: $spacing-xl;
  cursor: pointer;
  transition: transform 0.3s ease;
  
  &:hover {
    transform: scale(1.02);
  }
}

.poetry-text {
  text-align: center;
  color: white;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  max-width: 900px;
  
  .poetry-sentence {
    font-size: 42px;
    font-weight: 500;
    line-height: 1.8;
    margin-bottom: $spacing-xl;
    letter-spacing: 4px;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    @include responsive(md) {
      font-size: 32px;
      letter-spacing: 3px;
      min-height: 60px;
    }
    
    @include responsive(sm) {
      font-size: 24px;
      letter-spacing: 2px;
      min-height: 45px;
    }
    
    .typewriter {
      display: inline-block;
    }
    
    .cursor-blink {
      display: inline-block;
      margin-left: 4px;
      animation: blink 1s step-end infinite;
      font-weight: 300;
    }
  }
  
  .poetry-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: $spacing-sm;
    font-size: 18px;
    opacity: 0.95;
    animation: fadeIn 0.5s ease-in;
    
    @include responsive(md) {
      font-size: 16px;
    }
    
    @include responsive(sm) {
      font-size: 14px;
    }
  }
  
  .poetry-author {
    display: flex;
    align-items: center;
    justify-content: center;
    font-style: italic;
    
    .typewriter {
      display: inline-block;
    }
    
    .cursor-blink {
      display: inline-block;
      margin-left: 3px;
    }
  }
  
  .poetry-title {
    display: inline-block;
    font-style: italic;
    margin-top: $spacing-xs;
  }
  
  .click-hint {
    margin-top: $spacing-lg;
    font-size: 14px;
    opacity: 0.7;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: $spacing-xs;
    animation: fadeIn 0.5s ease-in, float 2s ease-in-out infinite;
    
    @include responsive(md) {
      font-size: 13px;
    }
    
    @include responsive(sm) {
      font-size: 12px;
    }
    
    i {
      font-size: 12px;
    }
  }
}

.animate-fade-in {
  animation: fadeInUp 1.2s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes blink {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}
</style>



